<template>
  <div>
    <div class="newAdd">
      <el-button type="primary"
                 size="small"
                 @click="equipmentAddVisible=true">新增设备</el-button>
    </div>
    <el-table :data="tableData">
      <el-table-column label="设备号"
                       align="center"
                       prop="eq_num">

      </el-table-column>
      <el-table-column label="状态"
                       align="center">
        <template slot-scope="scope">
          <span :class="[scope.row.status===1 ? 'col-F56C6C' : 'col-67C23A']">{{scope.row.status===1 ? '未绑定' : '已绑定'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="录入时间"
                       align="center"
                       prop="create_time">

      </el-table-column>
      <el-table-column label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-button type="warning"
                     size="small"
                     @click="Delete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <v-dialog title="新增设备"
              width="30%"
              :show.sync='equipmentAddVisible'>
      <el-form label-width="13%">
        <el-form-item label="类型:">
          <el-select placeholder="请选择类型"
                     v-model="listQuery.type">
            <el-option label="UBI"
                       value="1"></el-option>
            <el-option label="分销商"
                       value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备号:">
          <div class="equipment">
            <el-input placeholder="请输入设备号"
                      v-model="listQuery.eq_num" />
            <p style="padding:0 10px;">-</p>
            <el-input placeholder="请输入设备号"
                      v-model="listQuery.obds" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     size="small"
                     @click="add">添加</el-button>
        </el-form-item>
      </el-form>
    </v-dialog>
    <v-pagination :total='total'
                  :page.sync='page'
                  @pagination='init' />
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      page: 1,
      total: 0,
      equipmentAddVisible: false,
      listQuery: {
        type: '',
        eq_num: '',
        obds: ''
      }
    }
  },
  methods: {
    async init () {
      try {
        const res = await this.api.equipmentList({ page: this.page, type: 1 })
        this.tableData = res.data.list || []
        this.total = res.data.rows
      } catch (err) {
        console.log('出错请联系管理员', err)
      }
    },
    async  add () {  //新增设备号
      try {
        const res = await this.api.addEqequipment(this.listQuery)
        if (res.code == 1) {
          this.$message({ message: res.msg, type: 'success' })
          this.equipmentAddVisible = false
          this.init()
        } else {
          this.$message.error(res.msg)
        }
      } catch (err) {
        console.log('出错了,请联系开发成员', err)
      }
    },
    Delete (id) { //删除设备号
      this.$confirm('此操作将永久删除次设备吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const res = await this.api.delequipment({ id: id })
          if (res.code == 1) {
            this.$message({ message: res.msg, type: 'success' })
            this.init()
          } else {
            this.$message.error(res.msg)
          }
        } catch (err) {
          console.log('出错请联系管理员', err)
        }
      }).catch(() => { })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
.col-F56C6C {
  color: #f56c6c;
}
.col-67C23A {
  color: #67c23a;
}
.newAdd {
  text-align: right;
  margin: 10px;
}
.equipment {
  display: flex;
  justify-content: space-between;
}
</style>
